<template>
  <div class="carEcharts">
    <el-row :gutter="20">
      <el-col :span="20">
        <div class="echarts">
          <div id="myChart" :style="{width: '100%', height: '450px'}"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from '@/utils/request'
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {
  name: 'CarEcharts',
  data () {
    return {
      source: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      const { data: res } = await request.postJson('/getCarNum', {})
      console.log(res)
      res.data.forEach(item => {
        if (item.status === '0') {
          this.source.push(
            ['未使用', item.num]
          )
        } else if (item.status === '1') {
          this.source.push(
            ['被预定', item.num]
          )
        } else if (item.status === '2') {
          this.source.push(
            ['被驾驶', item.num]
          )
        }
      })
      const myChart = echarts.init(document.getElementById('myChart'))
      myChart.setOption({
        title: {
          text: '汽车使用情况统计图',
          left: 'left'
        },
        legend: {},
        tooltip: {},
        dataset: {
          source: this.source
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [
          { type: 'bar' }
        ]
      })
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
